import React from 'react';
import styles from './index.less';

// @ts-ignore
import Valine from 'gatsby-plugin-valine';

import MdRender from '@/components/mdRender';
import InfoCard from '@/components/infoCard';
import RecentPostCard from '@/components/recentPostCard';
import ArchivesPostCard from '@/components/archivesPostCard';
import MdToc from '@/components/mdToc';
import IconFont from '@/components/iconFont';

// @ts-ignore
import md from '../../components/mdRender/test.md';

export default (props: {
  match: any;
  location: any;
  history: any;
  route: any;
  routes: any;
}) => {
  return (
    <div className={styles.background}>
      <div className={styles.cols}>
        <div className={styles.post}>
          <MdRender source={md} />
          <div className={styles.copyright}>
            <div className={styles.author}>
              <span>文章作者: </span>
              <span>
                <a href="mailto:undefined" data-pjax-state="">
                  Tian
                </a>
              </span>
            </div>
            <div className={styles.type}>
              <span>文章链接: </span>
              <span>
                <a
                  href={'https://www.dakaijiu.cn/' + props.location.pathname}
                  data-pjax-state=""
                >
                  {'https://www.dakaijiu.cn/' + props.location.pathname}
                </a>
              </span>
            </div>
            <div className={styles.notice}>
              <span>版权声明: </span>
              <span>
                本博客所有文章除特别声明外，均采用{' '}
                <a
                  href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
                  target="_blank"
                >
                  CC BY-NC-SA 4.0
                </a>{' '}
                许可协议。转载请注明来自{' '}
                <a href="https://dakaijiu.cn" target="_blank">
                  NGC5189
                </a>
                ！
              </span>
            </div>
          </div>
          <hr />
          <div className={styles.comments}>
            <div className={styles.header}>
              <div className={styles.header_line}>
                <IconFont use={'ngcliaotian'} />
                <span>评论</span>
              </div>
            </div>
            <div>
              <Valine
                appId={'J4Na75P8xlVWvHyEtl9CY3hz-gzGzoHsz'}
                appKey={'bRwNEKsBk1dOtHf0BaE4K1hW'}
                pageSize={12}
                enableQQ={true}
                placeholder={'请友善沟通'}
                avatar={'retro'}
              />
            </div>
          </div>
        </div>
        <div className={styles.aside}>
          <InfoCard />
          <div className={styles.sticky_layout}>
            <MdToc source={md} />
            <RecentPostCard />
          </div>
        </div>
      </div>
    </div>
  );
};
